﻿@model BillBox.Models.Bill

@{
    ViewBag.Title = "New Payment";
    Layout = "~/Views/Shared/_Layout.cshtml";

    var subscribers = ViewBag.subscribers as IEnumerable<BillBox.Models.Subscriber>;
}


<div class="row main">
    <div class="col-lg-12">
        <ol class="breadcrumb">
            <li>@Html.ActionLink("Home", "Index", "Default")</li>
            <li><a href="#">Payment</a></li>
            <li class="active">New Payment</li>
        </ol>
        <!--<h1 class="page-header">New Payment</h1>-->
        <div class="panel panel-default">
            <div class="panel-heading">
                New Payment
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-6">
                        @using (Html.BeginForm("NewBill", "Payment", FormMethod.Post, new { role = "form", @class = "form-horizontal" }))
                        {
                            @Html.AntiForgeryToken()
                            @Html.ValidationSummary(true)

                            <div class="form-group">
                                @Html.LabelFor(model => model.SubscriberId, new { @class = "col-sm-5 control-label" })
                                <div class="col-sm-7">
                                    @Html.DropDownListFor(model => model.SubscriberId, new SelectList(subscribers, "SubscriberId", "Name"), "Select Subscriber", new { @class = "form-control" })
                                    @Html.ValidationMessageFor(model => model.SubscriberId)
                                </div>
                            </div>
                            <div class="form-group" id="customer-name-forg-group">
                                @Html.LabelFor(model => model.CustomerName, new { @class = "col-sm-5 control-label" })
                                <div class="col-sm-7">
                                    @Html.TextBoxFor(model => model.CustomerName, new { @class = "form-control" })
                                    @Html.ValidationMessageFor(model => model.CustomerName)
                                </div>
                            </div>
                            <div id="capture-fields-area"></div>
                            <div class="form-group">
                                <div class="col-sm-offset-5 col-sm-7">
                                    <button type="submit" class="btn btn-default">Next</button>
                                </div>
                            </div>

                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript">
        $(document).ready(function () {
            $("#customer-name-forg-group").hide();
            loadSubscribers($('#@Html.IdFor(model => model.SubscriberId)').val());

            $('#@Html.IdFor(model => model.SubscriberId)').change(function (e) {
                loadSubscribers($(this).val());
            });
        });

        function loadSubscribers(subscriberId) {
            if (subscriberId) {

                var captureFields = "";

                $.ajax({
                    cache: false,
                    type: 'GET',
                    url: '@Url.Action("GetCaptureFields", "Payment")',
                    data: { 'subscriberId': subscriberId },
                    success: function (html) {
                        $("#capture-fields-area").html(html);
                        $("#customer-name-forg-group").show();
                    },
                    error: function () {
                        alert("Error");
                        $("#customer-name-forg-group").hide();
                    }
                });
            } else {
                $("#capture-fields-area").html("");
            }
        }
    </script>
}
